<template>
    <div class="message-box">
        <ul class="message-box__list" v-if='records.length'>
            <li class="message-box__item" v-for='item in records' @click='goDetail(item.messageId)'>
                <img :src="item.user.avatar || placeholderImg" alt="" class="message-box__avatar" v-if='item.user'>
                <div class="message-box__content" :class='{unread:item.readState == "UN_READ"}'>
                    <p class='content'><span>-NEW-</span>{{item.content}}</p>
                    <p class='time'>{{ item.sendTime | dateFormat('YYYY-MM-DD HH:mm:ss') }}</p>
                </div>
            </li>
        </ul>
        <p class="page-placeholder" v-else><span>暂无消息</span></p>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import dateFormat from '../filters/filter-dateFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { messageApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            
        },
        filters:{
            dateFormat,
        },
        data() {
            return {
                placeholderImg:require('../images/message.png'),
                num:1,
                list:{},
                records:[],
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            goDetail(id){
                this.$router.push({
                    name:'message-box-detail',
                    params:{
                        id:id
                    }
                })
            },
            getList(){
                this.showLoading()
                messageApi.list({
                    pageSize:20,
                    pageNo:this.num
                })
                .then(result=>{
                    this.hideLoading()
                    this.list = result
                    this.records = result.records
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
        },
        created(){
            
            this.getList()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .message-box{
        .message-box__item{
            display: flex;
            padding:16px 16px 8px 16px;
            background-color:#fff;
            border-bottom:1px solid $sectionColor;
            &:last-child{
                border-bottom:0;
            }
        }
        .message-box__avatar{
            width: 24px;
            height: 24px;
        }
        .message-box__content{
            flex:1;
            padding-left:16px;
            &.unread{
                .content{
                    color:$importColor;
                    span{
                        display: inline-block;
                    }
                }
            }
            .content{
                @extend %font-body1;
                color:$defaultColor;
                @include multiLine-overflow(2);
                span{
                    display: none;
                    color:#F44336;
                    padding-right:5px;
                }
            }
            .time{
                @extend %font-caption;
            }
        }
    }

</style>
